<!--
 * @Description: 
 * @Date: 2023-02-24 16:55:52
 * @LastEditors: czp
 * @LastEditTime: 2023-03-24 16:02:13
-->
<template>
	<div class="base-header" :style="{ backgroundImage: 'url(' + cosPrefix + nav.bg + '?imageMogr2/thumbnail/1280x)' }">
		<span class="title">· {{ nav.name }} ·</span>
		<div class="card-list">
			<div class="card" v-for="(item, index) in nav.children" :key="index">
				<div class="card-title">
					<div>
						<span>{{ item.name }}</span>
						<span>{{ item.desc }}</span>
						<el-image v-if="index % 2 == 0" class="card-title-bg" :src="cosPrefix + '/two-level/l.png'" fit="cover" />
						<el-image v-else class="card-title-bg" :src="cosPrefix + '/two-level/r.png'" fit="cover" />
					</div>
				</div>
				<span class="child" @click="pageJump(child.path, { categoryIndex: index, key: child.key })" v-for="(child, i) in item.children" :key="i">· {{ child.name }} ·</span>
				<el-image class="cover" :src="cosPrefix + item.img + '?imageMogr2/thumbnail/750x'" fit="cover" />
			</div>
		</div>
		<div class="bq">
			<span>Copyright2023：重庆市云上荆竹电子商务有限公司</span>
			<span @click="openURL">渝ICP备2023002178号-1</span>
		</div>
	</div>
</template>
<script setup lang="ts" name="BaseHeader">
import { useVR } from "@/hook/useVR";
import { useBaseStore } from "@/store/base";
import { INav } from "@/store/interface/base";

const { cosPrefix } = useBaseStore();

interface BaseHeaderProps {
	nav: INav;
}
defineProps<BaseHeaderProps>();

const { pageJump } = useVR();

const openURL = () => {
	window.open("https://beian.miit.gov.cn/#/Integrated/index", "_blank");
};
</script>
<style lang="scss" scoped>
.base-header::after {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	content: "";

	// background-color: #10101057;
}
.base-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	color: rgb(255 255 255 / 100%);
	background-repeat: no-repeat;

	// background-image: url("https://sms-1302634640.file.myqcloud.com/cloud-jingzhu/xiangye/img3.jpg");
	background-size: 100% 100%;
	.title {
		position: relative;
		z-index: 1;
		margin-bottom: 40px;
		font-family: SourceSerif;
		font-size: 48px;
		font-weight: bold;
	}
	.card-list {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: center;
		width: 100%;
		font-family: SourceSerif;
		.card {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			height: 520px;
			padding: 20px;
			margin-right: 100px;
			background-color: rgb(0 0 0 / 40%);
			border-radius: 4px;
			&:last-child {
				margin-right: 0;
			}
			.cover {
				width: 360px;
				height: 216px;
				margin-top: 33px;
				margin-bottom: 0;
				border-radius: 4px;
			}
			.child {
				margin-top: 20px;
				font-size: 20px;
				cursor: pointer;
				&:hover,
				&.active {
					color: $theme-color;
				}
			}
		}
	}
	.card-title {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 360px;
		height: 116px;
		.card-title-bg {
			width: 138px;
			height: 29px;
			margin-top: 4px;
			margin-bottom: 30px;

			// position: absolute;
			// top: 0;
			// left: 0;
		}
		div {
			position: relative;
			z-index: 2;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 20px;
			span {
				font-size: 14px;
				font-weight: normal;
				&:first-child {
					margin-bottom: 5px;
					font-size: 28px;
					font-weight: bold;
				}
			}
		}
	}
}
.bq {
	position: absolute;
	bottom: 20px;
	z-index: 100;
	cursor: pointer;
	span {
		margin-right: 30px;
	}
}
</style>
